<template>
  <div class="w_h_100">
    <div class="inlet">系统管理 > 权限管理 ><span class="size">菜单管理</span></div>
    <div class="box">
      <el-tree style="width: 100%; height: 100%;" :data="dataSource"  node-key="id" :props="props"
        default-expand-all >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <div class="d_f">
              <div class="success size" @click="add(data)" v-hasPerm="'addMenu'">新增</div>
              <div class="edit size m_l_10" @click="edit(node,data)" v-hasPerm="'editMenu'">编辑</div>
              <div class="error size m_l_10" v-if="![1,2,3,4,5].includes(node.data.id)" @click="deleteOut(node)" v-hasPerm="'deleteMenu'">删除</div>
            </div>
          </span>
        </template>
      </el-tree>
    </div>
    <el-drawer v-model="show" :title="title" size="500px" direction="rtl" :before-close="handleClose">
      <div class="myform">
        <myform :fields="fields"  ref="ruleFrom" :options="options" :model="model" :inline="false" labelPosition="top" :rules="rules"
          class="m_t_16">
        </myform>
      </div>
      <div class="d_f j_c_c">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted,ref } from 'vue'
import { permissionSrcList,permissionSrcAdd,permissionSrcUpdate,permissionSrcDeleteById } from '../../../../api/system/authority'
import {authorityMenuType} from '../../../../type/system'
import {copy} from '../../../../utils/date'
import { ElMessageBox } from 'element-plus'
import { Message } from '../../../../utils/resetMessage'
const model={
  id:0,
  parentId:null,
  name:'',
  classify:'2',
  idxUri:'',
  permCode:'',
  sysLabel:'1',
  parentName:'',
  tab:'0',
  icon:'',
}
export default defineComponent({
  name: '',
  setup() {
    const data:authorityMenuType = reactive({
      dataSource: [],
      props: {
        label: 'name',
        children: 'children',
      },
      show:false,
      title:'新增菜单',
      fields: [
        {
          label: "父级菜单",
          prop: 'parentName',
          placeholder: '请输入',
          type: 'input',
        },
        {
          label: "菜单名称",
          prop: 'name',
          placeholder: '请输入',
          type: 'input',
        },
        {
          label: "菜单路径",
          prop: 'idxUri',
          placeholder: '请输入',
          type: 'input',
        },
        {
          label: "菜单唯一标识符",
          prop: 'permCode',
          placeholder: '请输入',
          type: 'input',
        },
        {
            label: '图标',
            prop: 'icon',
            labelWidth: '110px',
            type: 'input',
            placeholder: '请输入图标路径',
        },
        {
          label: "资源类型",
          prop: 'classify',
          placeholder: '请输入',
          type: 'radio',
        },
        {
          label: "模块分类",
          prop: 'sysLabel',
          placeholder: '请输入',
          type: 'radio',
        },
        {
          label: "归属菜单",
          prop: 'tab',
          placeholder: '请输入',
          type: 'radio',
        },

        
      ],
      model:copy(model),
      rules:{
        name: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' },
          ],
          idxUri: [
            { required: true, message: '请输入菜单路径', trigger: 'blur' },
          ],
          permCode: [
            { required: true, message: '请输入菜单唯一标识符', trigger: 'blur' },
          ],
      },
      options:{
        classify:[
          {
            label:"模块",
            value:'3',
          },
          {
            label:"菜单",
            value:'2',
          },
          {
            label:"按钮",
            value:'1',
          },
        ],
        sysLabel:[
        {
            label:"系统管理",
            value:'1',
          },
          {
            label:"业务管理",
            value:'2',
          },
          {
            label:"统计报表",
            value:'3',
          },
        ],
        tab:[
          {
            label:'系统管理',
            value:'0'
          },
          {
            label:'业务进件',
            value:'1'
          },
          {
            label:'待办任务',
            value:'2'
          },
          {
            label:'业务管理',
            value:'3'
          },
          {
            label:'报表管理',
            value:'4'
          },
        ],
      }
    })
    onBeforeMount(() => {
      methods.getData()
    })
    onMounted(() => {
    })
    const ruleFrom=ref()
    const methods = {
      getData() {
        permissionSrcList({}).then((res: any) => {
          data.dataSource = res
        })
      },
        //关闭弹窗
        handleClose() {
        ElMessageBox.confirm(
          '当前信息将不再保存?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            ruleFrom.value.resetFields()//重置表单
            data.show = false
            data.model = copy(model)
          })
      },
      save(){
        ruleFrom.value.verification().then(()=>{
          if(!data.model.id){
            permissionSrcAdd(data.model).then(()=>{
              Message({type:'success',message:'添加成功'})
              methods.getData()
              data.show=false//关闭弹窗
              ruleFrom.value.resetFields()//重置表单
              data.model=copy(model)//重置表单绑定数据
            })
          }else{
            permissionSrcUpdate(data.model).then(()=>{
              Message({type:'success',message:'修改成功'})
              methods.getData()
              data.show=false//关闭弹窗
              ruleFrom.value.resetFields()//重置表单
              data.model=copy(model)//重置表单绑定数据
            })
          }
        })
      },
      add(e:any){
        data.model.parentId=e.id
        data.model.parentName=e.name
      data.title='新增菜单'
      data.show=true
      },
      edit(node:any,e:any){
        data.model.parentName=node.parent.data.name
        data.model.parentId= node.parent.data.id
        data.model.name=e.name
        data.model.id=e.id
        data.model.classify= String(e.classify)
        data.model.idxUri=e.idxUri
        data.model.permCode=e.permCode
        data.model.tab=String(e.tab)
        data.model.sysLabel=String(e.sysLabel.value)
        data.model.icon=e.icon
      data.title='编辑菜单'
      data.show=true
      },
      //删除当前菜单
      deleteOut(node:any){
        ElMessageBox.confirm(
                    '是否删除当前菜单?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'error',
                    }
                )
                    .then(() => {
                      permissionSrcDeleteById({ id: node.data.id }).then(() => {
                            Message({ type: 'success', message: '删除成功' })
                            methods.getData()
                        })
                    })
      }
    }
    return {
      ...toRefs(data),
      ...methods,ruleFrom
    }
  }
})
</script>
<style scoped lang='scss'>
.custom-tree-node {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.box {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 24px 32px;
  height: calc(100% - 92px);
  margin-top: 10px;
}

.size {
  font-size: 14px !important;
}
</style>
<style lang='scss'>
.myform{
  .el-input{
    width: 100% !important;
  }
}
</style>